<template>
  <div id="login">

    <div class="form">

      <el-form >
        <el-form-item  label="账户"  label-width="50px">
          <el-input v-model="LoginForm.account" placeholder="" ></el-input>
        </el-form-item>

        <el-form-item  label="密码" label-width="50px" >
          <el-input v-model="LoginForm.password" placeholder=""></el-input>
        </el-form-item>

        <el-button type="primary" @click="submitForm" >登入</el-button>
      </el-form>
    </div>


  </div>

</template>

<script>
  import * as rootController from '@/api/rootController'
  import com from '@/config/com.js'

  export default {
    data() {
      return {
        LoginForm:{
          account: '',
          password: ''
        }
      }
    },
    methods: {
      submitForm(){
        rootController.login({
            username: this.LoginForm.account,
            password: this.LoginForm.password
          }).then((res) => {
            if (res.code == 200) {
              this.resetCommonData(res.data)
              this.$router.push({ path: '/' })
            }
          })
      }
    },
    mixins: [com]
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >

  #login {
    height: 100%;
    position: relative;
    background-color: darkgray;

  }
   #login .form {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 380px;
     height: 380px;
     margin-top: -190px;
     margin-left: -190px;
     

   }
  .form .el-form {
    padding: 50px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #fff;
    

  }

  #login .form .el-form button{
    width: 300px;
    margin-top: 20px;
  }



</style>
